<template>
	<view class="my-swiper-p" :style="{ width: `${width}rpx`, height: `${height}rpx` }">
		<swiper
			class="my-swiper"
			:autoplay="autoplay"
			:interval="interval"
			:duration="duration"
			:previous-margin="previousMargin"
			:next-margin="nextMargin"
			:circular="circular"
			:vertical="vertical"
			@change="swiperchange"
			:current="current"
			:display-multiple-items="showItem"
			:style="{ 'border-radius': `${radius}rpx` }"
		>
			<swiper-item v-for="(item, index) in SWIPER_LIST" :key="index">
				<view class="swiper-item" :class="type">
					<block v-if="slotItem">
						<slot :pushdata="{ item, index }"></slot>
					</block>
					<block v-else>
						<myimg
							:imgsrc="item.image"
							:width="width"
							:height="height"
							:radius="radius"
							:urls="SWIPER_LIST"
							:current="index"
							:showclose="showclose"
							@closeClick="closeClick($event)"
							@imgClick="imgClick($event)"
						></myimg>
					</block>
				</view>
			</swiper-item>
		</swiper>
		<block v-if="dotSlot">
			<slot name="dotSlot" :currentdot="currentdot" :length="SWIPER_LIST.length"></slot>
		</block>

		<view :class="dotClass" v-else>
			<block v-if="dotnum">{{ currentdot + 1 }}/{{ SWIPER_LIST.length }}</block>
			<block v-else>
				<view class="item" :class="{ on: currentdot == index }" v-for="(item, index) in SWIPER_LIST" :key="index"></view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	name: 'myswiper',
	props: {
		radius: {
			type: [Number, String],
			default: '0',
		},
		type: {
			type: String,
		},
		goods: {
			type: Boolean,
			default: false,
		},
		slotItem: {
			type: Boolean,
			default: false,
		},
		quantity: {
			// 一个轮播展示几个item
			type: Number,
		},
		circular: {
			// 是否采用衔接滑动
			type: Boolean,
			default: false,
		},
		showItem: {
			// 显示的滑块数量
			type: Number,
			default: 1,
		},
		vertical: {
			// 滑动方向是否为纵向
			type: Boolean,
			default: false,
		},

		duration: {
			// 滑动动画时长
			type: Number,
			default: 300,
		},
		interval: {
			// 自动切换时间间隔
			type: Number,
			default: 3000,
		},
		autoplay: {
			// 是否自动切换
			type: Boolean,
			default: false,
		},
		nextMargin: {
			// 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 头条小程序不支持
			type: String,
			default: '0',
		},
		previousMargin: {
			//前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值头条小程序不支持
			type: String,
			default: '0',
		},
		dotClass: {
			type: [String, Array, Boolean],
			default: 'dots',
		},
		dotnum: {
			type: Boolean,
			default: false,
		},
		dotSlot: {
			type: Boolean,
			default: false,
		},
		width: {
			type: [Number, String],
			default: '750',
		},
		height: {
			type: [Number, String],
			default: '750',
		},
		radius: {
			type: [Number, String],
			default: '0',
		},
		LIST: {
			type: [Array],
			default() {
				return [];
			},
		},
		// link 跳转链接 preview预览大图 emit触发自定义事件
		imgClickMode: {
			type: [String],
			default: 'link',
		},
	},

	data() {
		return {
			current: 0,
			currentdot: 0,
			SWIPER_LIST: [],
		};
	},
	created() {},
	mounted() {},
	computed: {},
	methods: {
		initComponents() {
			let _this = this;
			if (_this.LIST.length == 0) return;
			let imgs = [];
			_this.LIST.forEach(item => {
				let TYPE = _this.gettype(item);
				let PUSH = {};
				switch (TYPE) {
					case 'Object':
						if (_this.objJudge(item['image'])) {
						} else {
							item['image'] = item['banner_image'];
						}
						PUSH = item;
						break;
					case 'String':
						PUSH['image'] = item;
						break;
				}
				imgs.push(PUSH);
			});
			// console.log(imgs);
			_this.SWIPER_LIST = imgs;
		},
		swipertab(type) {
			if (type == 'less') {
				if (this.current == 0) {
					this.current = this.LIST.length - 1;
				} else {
					this.current--;
				}
			} else {
				if (this.current == this.LIST.length - 1) {
					this.current = 0;
				} else {
					this.current++;
				}
			}
		},
		// 自定义指示点
		swiperchange(e) {
			this.currentdot = e.detail.current;
		},
		imgClick(event) {
			let _this = this;
			let { current, urls } = event;
			let item = urls[current];
			// console.log(event);
			if (_this.imgClickMode == 'link') {
				_this.goweburl_f(item.banner_url, item.banner_jump);
			} else if (_this.imgClickMode == 'preview') {
				_this.com_previewImage($event);
			} else if (_this.imgClickMode == 'emit') {
				_this.$emit('imgClick', item);
			}
		},
	},
	watch: {
		currentdot(val) {
			this.$emit('swiperchange', val);
		},
		LIST: {
			handler(val) {
				this.initComponents();
			},
			immediate: true,
		},
	},
};
</script>

<style lang="scss">
.my-swiper-p {
	position: relative;
	.my-swiper {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		transform: translateY(0);
	}
}

.swiper-item {
	width: 100%;
	height: 100%;
}
</style>
